import React from 'react'
import { Form, Input, Button, Checkbox, message } from 'antd';
import "./HomeInput.scss"
import { httpaddPost } from '../../apis';
import { useSelector } from 'react-redux';

const { TextArea } = Input;

export default function HomeInput(props) {
    const user = useSelector(state => state.user);
    const list = props.state.list;
    const dispatch = props.dispatch;
    
    const onFinish = async (values) => {
        if(!user.name) {
            message.error("您还没有登录哦~");
            return ;
        }
        let data = {
            ...values,
            userId: user.userId,
            time: new Date().getTime(),
        }
        let res = await httpaddPost(data);
        if(res.content) {
            dispatch({
                type: "addPost",
                post: {
                    ...res,
                    name: user.name,
                    userId: user.userId,
                    url: user.url
                }
            });
        }
    };

    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    
  return (
    <div className='HomeInput-container'>
        <Form
        name="basic"
        // labelCol={{span: 8}}
        wrapperCol={{ span: 24 }}
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
        >
        <Form.Item
            name="content"
            rules={[{ required: true}]}
            style={{marginBottom: '10px'}}
        >
            <TextArea rows={5} style={{resize: 'none'}} placeholder="发表友好的评论吧" maxLength={30} />
        </Form.Item>


        <Form.Item wrapperCol={{ offset: 21}} style={{marginBottom: 0}}>
            <Button type="primary" htmlType="submit">
                submit
            </Button>
        </Form.Item>
        </Form>
    </div>
  )
}
